<template>
  <div class="page-title-wrapper">
    <el-icon><ArrowLeft /></el-icon>
    <span @click="backFn">{{ props.title }}</span>
  </div>
</template>

<script setup>
  import { ArrowLeft } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();

  const props = defineProps({
    title: {
      type: String,
      default: ''
    }
  });

  function backFn() {
    router.back();
  }
</script>

<style lang="scss" scoped>
  .page-title-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 16px;

    span {
      position: relative;
      margin-left: 5px;
      color: var(--color-primary);

      &:hover {
        cursor: pointer;
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -20px;
        width: 25px;
        height: 18px;
      }
    }
  }
</style>
